// 初始化年份趋势折线图
// 期望API返回的数据格式：
// {
//   code: 200,
//   message: 'success',
//   data: {
//     years: ['1990', '1995', ...],
//     data: [5, 12, ...]
//   }
// }

document.addEventListener('DOMContentLoaded', function() { // 页面DOM加载完成后执行
    // 获取图表容器元素
    const chartDom = document.getElementById('yearLine'); // 获取id为yearLine的DOM节点
    const chart = echarts.init(chartDom); // 初始化ECharts实例
    
    // 显示加载动画，提升用户体验
    chart.showLoading({
        text: '数据加载中...', // 加载提示文字
        color: '#14c8fd',     // 加载动画颜色
        textColor: '#fff',    // 文字颜色
        maskColor: 'rgba(13, 26, 45, 0.8)' // 遮罩层颜色
    });

    // 默认模拟数据（API不可用时使用）
    let years = ['1990', '1995', '2000', '2005', '2010', '2015', '2020']; // 年份数组
    let data = [5, 12, 18, 25, 30, 42, 35]; // 每年电影数量

    // API接口地址
    const apiUrl = '/api/yearLine'; // 后端API接口地址

    // 尝试从API获取数据
    fetch(apiUrl) // 发送GET请求
        .then(res => { // 处理响应
            if (!res.ok) throw new Error('Network response was not ok'); // 检查响应状态
            return res.json(); // 解析JSON
        })
        .then(json => { // 处理返回的JSON数据
            if (
                json.code === 200 && // 状态码为200
                json.data && // 有data字段
                Array.isArray(json.data.years) && // years为数组
                Array.isArray(json.data.data) // data为数组
            ) {
                years = json.data.years; // 更新年份数组
                data = json.data.data;   // 更新数据数组
            }
        })
        .catch(err => { // 捕获异常
            console.warn('使用默认数据，API获取失败：', err); // 输出警告
        })
        .finally(() => { // 无论成功失败都执行
            renderChart(years, data); // 渲染图表
        });

    // 渲染图表的函数
    function renderChart(years, data) {
        // 图表配置项
        const option = {
            backgroundColor: 'transparent', // 背景透明
            title: {
                text: '电影年份分布趋势', // 标题
                left: 'center', // 居中
                top: 20, // 距离顶部20px
                textStyle: {
                    color: '#fff', // 标题颜色
                    fontSize: '16' // 标题字体大小
                }
            },
            tooltip: {
                trigger: 'axis', // 触发类型：坐标轴
                backgroundColor: 'rgba(13, 26, 45, 0.8)', // 提示框背景色
                borderColor: '#14c8fd', // 边框颜色
                textStyle: {
                    color: '#fff' // 文字颜色
                },
                axisPointer: {
                    type: 'line', // 指示线类型
                    lineStyle: {
                        color: '#14c8fd', // 指示线颜色
                        width: 2 // 指示线宽度
                    }
                }
            },
            grid: {
                top: '15%', // 上边距
                left: '3%', // 左边距
                right: '4%', // 右边距
                bottom: '3%', // 下边距
                containLabel: true // 包含坐标轴标签
            },
            xAxis: {
                type: 'category', // 类目轴
                boundaryGap: false, // 不留白
                data: years, // x轴数据
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)' // 轴线颜色
                    }
                },
                axisLabel: {
                    color: '#fff', // 标签颜色
                    fontSize: 12 // 标签字体大小
                }
            },
            yAxis: {
                type: 'value', // 数值轴
                name: '电影数量', // y轴名称
                nameTextStyle: {
                    color: '#fff' // 名称颜色
                },
                axisLine: {
                    show: true, // 显示y轴线
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)' // 轴线颜色
                    }
                },
                axisLabel: {
                    color: '#fff', // 标签颜色
                    fontSize: 12 // 标签字体大小
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)' // 分割线颜色
                    }
                }
            },
            series: [{
                name: '电影数量', // 系列名称
                type: 'line', // 折线图
                smooth: true, // 平滑曲线
                symbol: 'circle', // 拐点形状
                symbolSize: 8, // 拐点大小
                data: data, // y轴数据
                itemStyle: {
                    color: '#14c8fd' // 拐点颜色
                },
                lineStyle: {
                    width: 3, // 线宽
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#14c8fd'
                    }, {
                        offset: 1,
                        color: '#43eec6'
                    }]) // 渐变色
                },
                areaStyle: {
                    opacity: 0.3, // 区域透明度
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#14c8fd'
                    }, {
                        offset: 1,
                        color: 'rgba(67, 238, 198, 0.1)'
                    }]) // 区域渐变色
                },
                emphasis: {
                    itemStyle: {
                        color: '#fff', // 高亮拐点颜色
                        borderColor: '#14c8fd', // 高亮边框色
                        borderWidth: 3, // 高亮边框宽
                        shadowColor: 'rgba(20, 200, 253, 0.5)', // 高亮阴影色
                        shadowBlur: 10 // 高亮阴影模糊
                    }
                }
            }]
        };

        // 使用配置项显示图表
        chart.hideLoading(); // 隐藏加载动画
        chart.setOption(option); // 设置图表配置

        // 添加动画效果：自动高亮每个点
        let currentIndex = -1; // 当前高亮索引
        const dataLen = data.length; // 数据长度
        const highlight = () => { // 高亮函数
            currentIndex = (currentIndex + 1) % dataLen; // 下一个高亮点
            chart.dispatchAction({
                type: 'showTip', // 显示提示框
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            chart.dispatchAction({
                type: 'highlight', // 高亮当前点
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            // 取消前一个高亮
            const lastIndex = (currentIndex - 1 + dataLen) % dataLen;
            chart.dispatchAction({
                type: 'downplay', // 取消高亮
                seriesIndex: 0,
                dataIndex: lastIndex
            });
        };

        // 开启定时器，自动轮播高亮
        let timeId = setInterval(highlight, 2000); // 每2秒高亮下一个点

        // 鼠标移入停止自动高亮
        chart.on('mouseover', function(params) {
            clearInterval(timeId); // 停止定时器
            chart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: params.dataIndex
            });
        });

        // 鼠标移出恢复自动高亮
        chart.on('mouseout', function(params) {
            chart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: params.dataIndex
            });
            timeId = setInterval(highlight, 2000); // 重新开启定时器
        });

        // 监听窗口大小变化，自适应调整图表
        window.addEventListener('resize', function() {
            chart.resize(); // 调整图表大小
        });
    }
}); 